<template>
    <div>
        <myHead title="登录" :show="true"></myHead>
        <div class="img-div">
            <van-image
            width="150"
            style="margin:0 auto"
            src="http://calabashbaby.cn/img/new2233.png"
            fit='contain'
            round
        />
        </div>
        <van-tabs v-model="active" class="login-form">
            <van-tab title="用户名登录">
                <van-form @submit="onSubmit">
                    <van-field
                        v-model="login.phone"
                        name="phone"
                        label="手机号"
                        placeholder="手机号"
                        :rules="[{ required: true, message: '请填写手机号' },{pattern:phonePattern, message: '请输入正确电话号码' }]"
                        required
                    />
                    <van-field
                        v-model="login.password"
                        type="password"
                        name="pwd"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                        required
                    />
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">登录</van-button>
                    </div>
            </van-form>
        </van-tab>
        <van-tab title="验证码登录">
            <van-form @submit="onPhoneSubmit">
                    <van-field
                        v-model="login.phone"
                        name="phone"
                        label="手机号"
                        placeholder="手机号"
                        :rules="[{ required: true, message: '请填写手机号' },{pattern:phonePattern, message: '请输入正确电话号码' }]"
                        required
                    />
                    <van-field
                        v-model="login.sms"
                        center
                        clearable
                        label="短信验证码"
                        placeholder="请输入短信验证码"
                        required
                        name='captcha'
                        :rules="[{ required: true, message: '请输入短信验证码' }, { pattern: /^\d{4}$/, message: '验证码必须4位数字' }]"
                        >
                        <template #button>
                            <van-button size="small" v-if="!toggle" type="info" @click.stop="setPhone" :disabled="!flag">发送验证码</van-button>
                            <van-button size="small" v-else type="danger">{{countnum}} S</van-button>
                        </template>
                    </van-field>
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">登录</van-button>
                    </div>
                </van-form>
            </van-tab>
        </van-tabs>
        <div class="forget-box">
            <span class="left">忘记密码?</span>
            <span class="right" @click="goRegister">没有账号?立即注册!</span>
        </div>
    </div>
</template>
<script>
// import { Image as VanImage } from 'vant';
import{Notify} from 'vant'
// Vue.use(VanImage);
export default {
  data() {
    return {
        login:{
            phone:this.$route.query.phone
        },
        name:'',
        active:0,
        flag:true,
        toggle:false,
        phonePattern:this.$reg.phone,
        // countnum:'',
    };
  },
  watch:{

  },
  methods: {
        onPhoneSubmit(value){
            // console.log(value);
            this.$ajax.getcaptcha(value)
            .then(res=>{
                if(res.code==200){
                    // console.log("ok");
                    // this.userphone = value.phone;
                    this.$router.push({name:'mine'})
                    localStorage.setItem('appphone',value.phone)
                    localStorage.setItem('access_token',res.token)
                    this.changeAppPhone(value.phone)
                    // console.log(value.phone);
                }
            })
            .catch(err=>{
                console.log(err);
            })
        },
        onSubmit(value) {
            // console.log('submit', value);
            this.$ajax.login(value)
            .then(res=>{
                console.log(res);
                if(res.code==200){
                    // this.userphone = value.phone;
                    this.$router.push({name:'mine'})
                    localStorage.setItem('appphone',value.phone)
                    localStorage.setItem('server_token',res.token)
                    this.changeAppPhone(value.phone)
                }
            })
            .catch(err=>{
                console.log(err);
            })
        },
        judgeAll(){
             this.toggle = true;
             var timer =  setInterval(()=>{
                if(this.countnum>0){
                    this.countnum--;
                    this.toggle = true;
                }else{
                    clearInterval(timer)
                    timer  = null
                    this.countnum = 30;
                    this.toggle = false;
                }
            },1000)
        },
        setPhone(){
            
            // console.log('set phone ok',this.login.phone);
            var value = this.login.phone;
            console.log(value);
            if(value){

                this.$ajax.sendcaptcha({
                    phone:value
                })
                .then(res=>{
                    console.log(res);
                    if(res.code==200){
                        Notify({ type: 'success', message: res.msg});
                    }
                })
                this.judgeAll();
            }
        },
        goRegister(){
          this.$router.push({name:'register'})  
        }
  },
  mounted(){
    //   console.log(this.$router.query),
      this.login = {
        ...this.login,
        phone:this.$route.query.phone ? this.$route.query.phone : localStorage.getItem('appphone')
          
      }
    // this.login.phone=this.$router.query.phone ? this.$router.query.phone : localStorage.getItem('appphone')
  }
};
</script>
<style scoped lang='scss'>
    .login-form{
        margin-top: 10px;
    }
    .img-div{
        /* margin-left: 100px; */
        display: flex;
        justify-content: center;
    }
    .forget-box{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #646566;
        .left{
            margin-left: 10px;
        }
        .right{
            margin-right: 10px;
        }       
    }
</style>